<template>
	<view class="content">
		<view class="main-btn">
			<view class="title">
				<text>信息列表</text>
			</view>
			<view class="btn1">
				<text @tap="tuijian1" v-if="this.ad">推荐排序</text>
				<text @tap="tuijian2" v-if="!this.ad">推荐排序</text>
			</view>
			<view class="btn2">
				<text @tap="xinzi1" v-if="this.as">薪资排序↓</text>
				<text @tap="xinzi2" v-if="!this.as">薪资排序↑</text>
			</view>
		</view>
		<view class="content-main" v-for="(item,index) in msglist" :key="item.id" @tap="godetails(item.id,item.title,item.xinzi,item.img,item.qyname)">
			<view class=" main-text">
				<view class="text-title">
					<text>{{item.title}}</text>
				</view>
				<view class="text-salary">
					<text>{{item.xinzi}}￥/天</text>
				</view>
			</view>
			<view class="text-middle">
				<view class="middle-left">
					<view class="middle-img">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="middle-name">
						<text>{{item.qyname}}</text>
					</view>
				</view>
				<view class="middle-right">
					<view class="middle-nub">
						<text>招聘{{item.number}}人</text>
					</view>
				</view>

			</view>
			<!-- <view class="bottom">
				<text>于{{item.time}}天前发布</text>
			</view> -->

		</view>
	</view>
</template>

<script>
	import http from "@/util/request.js"
	import axios from "axios"
	export default {
		name: "announcement",
		data() {
			return {
				a:1,
				max:'',
				as:false,
				ad:false,
				msglist:[],
				
			};
		},
		mounted() {
			http.request({
				url:'/msglist/'+this.a
			}).then(res =>{
				this.max = res.data.pages
				this.msglist = res.data.records
			}).then(res =>{
				console.log(this.msglist);
			})
		},
		methods: {
			loading(){
				if(this.a<this.max){
					this.a++
					uni.showLoading({
						title:'正在加载'
					})
					setTimeout(res =>{
						axios.get('/api/msglist/'+this.a).then(res =>{
						this.msglist = [...this.msglist,...res.data.records]
					}).then(res =>{
						uni.hideLoading({
							
						})
					})
					},500)
					
				}else{
					uni.showToast({
						title:'没有更多了',
						icon:"none"
					})
				}
				
			},
			xinzi1(){
				this.as = !this.as
				this.msglist.sort((a,b)=>{
					return a.xinzi - b.xinzi
				})
			},
			xinzi2(){
				this.as = !this.as
				this.msglist.sort((a,b)=>{
					return b.xinzi - a.xinzi
				})
			},
			tuijian1(){
				this.ad = !this.ad
				this.msglist.sort((a,b)=>{
					return a.id - b.id
				})
			},
			tuijian2(){
				this.ad = !this.ad
				this.msglist.sort((a,b)=>{
					return b.id - a.id
				})
			},
			godetails(id,title,xinzi,img,qyname) {
				uni.navigateTo({
					url: '/pages/index/zhaopin-details/zhaopin-details?id=' + id
					+ '&title='+ title+'&xinzi='+xinzi+'&img='+img+'&qyname='+qyname
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
	}

	.content-main {
		width: 100%;
		height: 100%;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #CCCCCC;

		.nottop {
			background-color: red;
		}
	}

	.main-text {
		width: 100%;
		height: 86rpx;
		display: flex;
		justify-content: space-between;

		.text-title {
			line-height: 86rpx;
			color: #99CCCC;
			font-size: 44rpx;
			
		}

		.text-salary {
			line-height: 86rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #99CCCC;
		}
	}

	.text-middle {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;

		.middle-left {
			display: flex;
		}

		.middle-img,
		.middle-img image {
			width: 100rpx;
			height: 100rpx;
		}

		.middle-name {
			line-height: 100rpx;
			font-size: 36rpx;
		}

		.middle-nub {
			font-size: 35rpx;
			line-height: 100rpx;
			color: #55557f;
		}
	}

	.bottom {
		width: 100%;
		height: 100%;
		color: #aaaaff;
	}
	
	
	.main-btn {
		width: 100%;
		height: 100rpx;
		background-color: bisque;
		display: flex;
		justify-content: space-around;
		position: sticky;
		top: 44px;
		z-index: 100;
		.btn1,
		.btn2 {
			margin: auto;
			
		}
	
		.title {
			font-weight: bold;
			color: #99CCCC;
			font-size: 48rpx;
			margin-left: 30rpx;
			line-height: 100rpx;
		}
	}
</style>
